//  代运营修改账号//添加账号

//修改账户
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import {Modal,Form,Input,Row,Col,Upload,Icon,Button,message} from 'antd';
import NumberInput from '../../../components/NumberInput/NumberInput'
import $ from 'jquery'
import * as tools from '../../../tools/tools';

const FormItem = Form.Item;


class OperationModifyAccount extends Component{
    constructor(props){
        super(props);
     
    }

    handleSubmit = (e) => {         //表单提交函数（修改用户）
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(this.props.Modifytype ==2){
                values.id ==this.props.checkeddata.id
            }
            values.token = localStorage.token;
            if (!err) {
                tools.loginView(this).then(
                    $.ajax({
                        type:'Post',
                        url: this.props.Modifytype ==1?tools.apiUrl+'operation/operate_account_add':tools.apiUrl+'operation/operate_account_edit',
                        data:values,
                        success:(res)=>{
                            if(res.status ==1){
                                message.success('添加成功')
                                $.ajax({
                                    type:'post',
                                    url:tools.apiUrl+''
                                })
                            }else{
                                message.error(res.msg)
                            }
                            this.props.onCancel();
                            this.props.form.resetFields();
                        },
                    }) 
                )  
            }else{
              message.error('请输入完整信息')
            }
        });
    }


    checkPassword=(rule, value, callback) =>{     //密码相同==>传值必须是(rule,value,callback)其中callback必须写里面内容
        const form = this.props.form;               //表单里面对输入框等的限制函数
        if (value && value !== form.getFieldValue('password')) {
            callback('两次密码输入不一致！');
        } else if(form.getFieldValue('password')!=null && value == null || value == ''){
            callback("请重复密码!");
        }else{
            callback()
        }
    }

    Modifycancel=()=>{
        this.props.onCancel();
        this.props.form.resetFields();
    }

    render(){
        const { getFieldDecorator } = this.props.form;
        console.log(this.props.Modifytype)
        return(
            <Modal title={this.props.Modifytype ==1?"添加账号":"修改账号"} className="modal_box"
                visible={this.props.show}
                maskClosable={false}
                onOk={this.handleSubmit}
                onCancel={this.Modifycancel}
                bodyStyle={{height:'700px',overflow: 'auto'}}
                >
                
                <Form layout="vertical" onSubmit={this.handleSubmit}>
                    <div>
                        <div className="modal_add_title"><span>账户信息</span></div>
                        <Row>
                            <Col span={13}>
                                {this.props.Modifytype ==1? <FormItem label="账号" hasFeedback={true} >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                                    {getFieldDecorator('username', { 
                                        rules: [
                                            {required:true,  message: '请输入账户!',max:20 }
                                            ],
                                            initialValue:''
                                            })(
                                        <Input placeholder="请输入新名称" />    
                                    )}
                                </FormItem>:
                                <FormItem label="账号" hasFeedback={true} >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                                    {getFieldDecorator('username', { 
                                            initialValue: this.props.Modifytype==1?false:this.props.checkeddata.username
                                            })(
                                        <Input placeholder="请输入新名称" />    
                                    )}
                                </FormItem>}
                               
                            </Col>
                            <Col span={13}>
                            {this.props.Modifytype ==1?<FormItem label="密码" hasFeedback={true} >
                                {getFieldDecorator('password', { 
                                    rules: [{required:true,message: '请输入6-20位字符、数字!',min:6,max:20 }]})(
                                    <Input placeholder="请输入新密码"  type="password"/>    
                                )}
                            </FormItem>:
                            <FormItem label="密码" hasFeedback={true} >
                                {getFieldDecorator('password',{
                                    rules: [{message: '请输入6-20位字符、数字!',min:6,max:20 }]
                                })(
                                    <Input placeholder="请输入新密码"  type="password"/>    
                                )}
                            </FormItem>}
                            
                            </Col>
                            <Col span={13}>
                            <FormItem label="重复密码" hasFeedback={true} >
                                {getFieldDecorator('password1', { 
                                    rules: [{required:true,validator:this.checkPassword }]})(                                       //validator  自己写js去控制
                                    <Input placeholder="请输入新密码"  type="password"/>    
                                )}
                            </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div>
                        <div className="modal_add_title"><span>个人信息</span></div>
                        <Row>
                            <Col span={13}>
                                {this.props.Modifytype ==1?<FormItem label="名称" hasFeedback={true} >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                                  {getFieldDecorator('name', { 
                                      rules: [{required:true, message: '请输入20字以内的名称!',min:1,max:20 }],
                                            initialValue:''
                                            })(
                                      <Input placeholder="请输入新名称" />    
                                  )}
                              </FormItem>:
                              <FormItem label="名称" hasFeedback={true} >                                              {/* rules是控制其内容，required是否显示图标 message输入错误提示  min max最小最大输入字段 */}
                                  {getFieldDecorator('name', { 
                                      initialValue: this.props.Modifytype==1?false:this.props.checkeddata.name
                                      })(
                                      <Input placeholder="请输入新名称" />    
                                  )}
                              </FormItem>}
                              
                            </Col>
                            <Col span={13}>
                                  {this.props.Modifytype ==1?<FormItem label="电话" hasFeedback={true} >
                                {getFieldDecorator('mobile', { 
                                    rules: [{required:true,message: '请输入11位手机号码!',pattern:"^[1][3,4,5,7,8][0-9]{9}$" }],
                                            initialValue:''
                                            })(          //pattern 正则判断
                                    <Input placeholder="请输入手机号"  />    
                                )}
                            </FormItem>:
                            <FormItem label="电话" hasFeedback={true} >
                                {getFieldDecorator('mobile', { 
                                    rules: [{message: '请输入11位手机号码!',pattern:"^[1][3,4,5,7,8][0-9]{9}$" }],
                                    initialValue: this.props.Modifytype==1?false:this.props.checkeddata.mobile
                                    })(          //pattern 正则判断
                                    <Input placeholder="请输入手机号"  />    
                                )}
                            </FormItem>}
                            
                            </Col>
                        </Row>
                    </div>
                    <div>
                        <div className="modal_add_title"><span>银行信息</span></div>
                        <Row>
                            <Col span={13}>
                                {this.props.Modifytype ==1?<FormItem label="开卡人姓名" hasFeedback="true" >
                                    {getFieldDecorator('cash_name',{
                                        rules:[{required:true,message:'请输入开卡人姓名'}],
                                        initialValue:''
                                    })(
                                        <Input placeholder="请输入开卡人姓名" />    
                                    )}
                                </FormItem>:
                                <FormItem label="开卡人姓名" hasFeedback="true" >
                                    {getFieldDecorator('cash_name',{
                                        initialValue: this.props.Modifytype==1?false:this.props.checkeddata.cash_name
                                    })(
                                        <Input placeholder="请输入开卡人姓名" />    
                                    )}
                                </FormItem>}
                                
                            </Col>
                            <Col span={13}>
                                    {this.props.Modifytype ==1?<FormItem label="开卡人账户" hasFeedback="true" >
                                {getFieldDecorator('cash_card',{
                                    rules:[{required:true,message:'请输入银行账号'}],
                                    initialValue:''
                                })(
                                    <NumberInput placeholder="请输入银行账号"  />    
                                )}
                            </FormItem>:
                            <FormItem label="开卡人账户" hasFeedback="true" >
                                {getFieldDecorator('cash_card',{
                                    rules:[{message:'请输入银行账号'}],
                                    initialValue: this.props.Modifytype==1?false:this.props.checkeddata.cash_card
                                })(
                                    <NumberInput placeholder="请输入银行账号"  />    
                                )}
                            </FormItem>}
                            
                            </Col>
                            <Col span={13}>
                                {this.props.Modifytype ==1?<FormItem label="开卡人银行" hasFeedback="true" >
                                {getFieldDecorator('cash_bank',{
                                    rules:[{required:true,message:'请输入开卡银行'}],
                                    initialValue:''
                                })(
                                    <Input placeholder="请输入开卡银行"  />    
                                )}
                            </FormItem>:
                            <FormItem label="开卡人银行" hasFeedback="true" >
                                {getFieldDecorator('cash_bank',{
                                    rules:[{message:'请输入开卡银行'}],
                                    initialValue: this.props.Modifytype==1?false:this.props.checkeddata.cash_bank
                                })(
                                    <Input placeholder="请输入开卡银行" />    
                                )}
                            </FormItem>}
                            
                            </Col>
                            <Col span={13}>
                                {this.props.Modifytype ==1?<FormItem label="所在银行支行" hasFeedback="true" >
                                {getFieldDecorator('cash_branch_bank',{
                                    rules:[{required:true,message:'请输入具体支行名称'}],
                                    initialValue:''
                                })(
                                    <Input placeholder="请输入具体支行名称"  />    
                                )}
                            </FormItem>:
                            <FormItem label="所在银行支行" hasFeedback="true" >
                                {getFieldDecorator('cash_branch_bank',{
                                    rules:[{message:'请输入具体支行名称'}],
                                    initialValue: this.props.Modifytype==1?false:this.props.checkeddata.cash_branch_bank
                                })(
                                    <Input placeholder="请输入具体支行名称"  />    
                                )}
                            </FormItem>}
                            
                            </Col>
                            <Col span={13}>
                                {this.props.Modifytype ==1?<FormItem label="银联号" hasFeedback="true" >
                                {getFieldDecorator('bank_node',{
                                    rules:[{required:true,message:'请输入银联号'}],
                                    initialValue:''
                                })(
                                    <NumberInput placeholder="请输入银联号" />    
                                )}
                            </FormItem>:
                            <FormItem label="银联号" hasFeedback="true" >
                                {getFieldDecorator('bank_node',{
                                    rules:[{message:'请输入银联号'}],
                                    initialValue: this.props.Modifytype==1?false:this.props.checkeddata.bank_node
                                })(
                                    <NumberInput placeholder="请输入银联号" />    
                                )}
                            </FormItem>}
                            
                            </Col>
                        </Row>
                    </div>
                </Form>
                
            </Modal>
        )
    }
}
const FromOperationModifyAccount  = Form.create()(OperationModifyAccount);
export default FromOperationModifyAccount
